<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <!-- DOM0级的代码实现
        方法一：HTML内联属性
        利用标签中的属性进行事件注册 -->
    <button id="btn1" type="button" onclick="show1()">测试按钮1</button>
    <script>
        function show1(){
            alert("与html属性关联，实现事件处理！");
        }
    </script>

        <!-- 方法二：纯JS
        将处理理程序的函数复制给对象的时间属性
        利用this获取目标元素的信息，比如单击按钮上的文字-->
    <button id="btn2" type="button">测试按钮3</button>
    <script>
        let btn4=document.querySelector("#btn2");
        btn4.onclick=function(){
            console.log(this.innerHTML);
        };
    </script>
</body>
</html>